<script setup>
import router from '@/router';
import {getUserIsMemberService} from "@/api/type.js";
import {ref} from "vue";
let notShow = ref(false);
const initSearch = async () => {
  const res = await getUserIsMemberService()
  if(res.data.memberType !== 'normal'){
    notShow.value = true;
  }
};
initSearch();
const handleClickPlum = () => {
  router.push({path: '/pay', query: { type: 'vip', level: 'plum', price: 19.99 } });
}
const handleClickGold = () => {
  router.push({path: '/pay', query: { type: 'vip', level: 'gold', price: 39.99 } });
}
const handleClickSuper = () => {
  router.push({path: '/pay', query: { type: 'vip', level: 'super', price: 99.99 } });
}
</script>

<template>
  <div id="page1" class="tab-page">
    <div class="price-card" @click="handleClickPlum" :class="{disabled: notShow}">
      <h2 class="price-card-title" style="color: plum;">{{ $t("plumVip") }}</h2>
      <div class="price-card-ribbon" style="background-color: plum;">
        <span class="ribbon-text">￥ 19.99</span>
      </div>
      <div class="price-card-info">
        <p>{{ $t('plumBenefit1') }}</p>
        <p>{{ $t('plumBenefit2') }}</p>
        <p>{{ $t('plumBenefit3') }}</p>
      </div>
    </div>
    <div class="price-card" @click="handleClickGold" :class="{disabled: notShow}">
      <h2 class="price-card-title" style="color: gold;">{{ $t("goldVip") }}</h2>
      <div class="price-card-ribbon" style="background-color: gold;">
        <span class="ribbon-text">￥ 39.99</span>
      </div>
      <div class="price-card-info">
        <p>{{ $t('goldBenefit1') }}</p>
        <p>{{ $t('goldBenefit2') }}</p>
        <p>{{ $t('goldBenefit3') }}</p>
      </div>
    </div>
    <div class="price-card" @click="handleClickSuper" :class="{disabled: notShow}">
      <h2 class="price-card-title" style="color: coral;">{{ $t("superVip") }}</h2>
      <div class="price-card-ribbon" style="background-color: coral;">
        <span class="ribbon-text">￥ 99.99</span>
      </div>
      <div class="price-card-info">
        <p>{{ $t('superBenefit1') }}</p>
        <p>{{ $t('superBenefit2') }}</p>
        <p>{{ $t('superBenefit3') }}</p>
        <p>{{ $t('superBenefit4') }}</p>
      </div>
    </div>
    <p class="bottom-sign">{{ $t("buyTip") }}</p>
  </div>
</template>

<style scoped>
.tab-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6vw;
  padding: 40px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  color: var(--txcolor);
  opacity: var(--page-opacity);
}

.price-card {
  color: #555;
  background-color: var(--card-bg);
  width: 25%;
  aspect-ratio: 9/14.5;
  min-width: 15rem;
  max-width: 18rem;
  font-size: 24px;
  text-align: center;
  padding: 0.5rem 0 1rem;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.price-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.price-card:hover {
  transform: translateY(-10px);
}

.price-card-ribbon {
  position: relative;
  padding: 2rem 1rem;
  margin: 2rem -0.8rem 2rem;
  transform: skew(0, -10deg);
  border-radius: 3px 0;
  box-shadow: 0 2rem 1.2rem -2rem #666;
}

.ribbon-text {
  color: #fff;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
  transform: skew(0, 10deg);
}

.price-card-info {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  gap: 15px;
}

.price-card-info p {
  font-size: 18px;
  color: var(--txcolor);
}

.bottom-sign {
  color: #333;
  font-size: 14px;
  position: absolute;
  bottom: 25px;
  width: calc(100% - 100px);
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  color: var(--txcolor);
}
</style>